<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
        }
        
        .input {
            position: relative;
            margin-left: 30px;
        }
        
        .input span:before {
            color: #4169E1;
            content: attr(data-placeholder);
            display: block;
            position: absolute;
            top: 0;
            left: 5px;
            font-size: 15px;
            z-index: -1;
        }
        
        .focusm+span:before {
            color: #4169E1;
            content: attr(data-placeholder);
            display: block;
            position: absolute;
            top: -20px;
            left: 5px;
            font-size: 10px;
            z-index: -1;
            transition: .5s;
        }
        
        input {
            border: 0;
            display: block;
            background: none;
            outline: none;
            margin-top: 30px;
            border-bottom: #4169E1 2px solid;
            width: 180px;
            z-index: 999;
        }
        .button{
            display: block;
            margin-top: 50px;
            margin-left: 35px;
        }
        button {
            outline: none;
            width: 150px;
            height: 40px;
            border-radius: 25px;
            border: none;
            color: white;
            background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
            box-shadow: 0 0 8px rgb(181, 154, 254);
        }
        
        button:focus {
            outline: 0;
        }
        
        button:hover {
            background-position: right;
        }
        .show-login{
            position: absolute;
            top:168px;
            left: 58px;
            display: block;
        }
        .show-sign {
            position: absolute;
            top:168px;
            left: 58px;
            display: none;
        }
        .active{
            color: 	#ffffff;
        }
    </style>
</head>
<body style="background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);">
    <div class="container-fluid d-flex" style="height: 100%;">
        <div class="row m-auto no-gutters" style="width: 80%">
            <div class="col-9">
                <img src="resources/img/timg.jpg" alt="timg" style="width: 100%;height: 100%">
            </div>
            <div class="col-3 position-relative">
                <p class="text-center" style="margin-top: 100px;font-size: 25px;color: #D3D3D3">
                    <span id="span-login" class="active">登录</span><span>/</span><span id="span-sign">注册</span>
                </p>
                <div class="show-login">
                    <form class="d-flex">
                        <div class="m-auto">
                            <div class="input">
                                <input type="email" required="" value="" />
                                <span data-placeholder="用户"></span>
                            </div>
                            <div class="input">
                                <input type="password" required="" value="" />
                                <span data-placeholder="密码"></span>
                            </div>
                            <div class="button d-flex">
                                <button class="m-auto">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="show-sign">
                    <form class="d-flex">
                        <div class="m-auto">
                            <div class="input">
                                <input type="email" required="" value="" />
                                <span data-placeholder="邮箱"></span>
                            </div>
                            <div class="input">
                                <input type="password" required="" value="" />
                                <span data-placeholder="密码"></span>
                            </div>
                            <div class="input">
                                <input type="password" required="" value=""/>
                                <span data-placeholder="确认密码"></span>
                            </div>
                            <div class="button d-flex">
                                <button class="m-auto">注册</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <script>
        var login=$("#span-login");
        var sign=$("#span-sign");
        login.click(function (){
            $(this).addClass("active")
            sign.removeClass("active")
            $(".show-login").css("display","block")
            $(".show-sign").css("display","none")

        });
        sign.click(function (){
            $(this).addClass("active")
            login.removeClass("active")
            $(".show-login").css("display","none")
            $(".show-sign").css("display","block")

        });
        $(".input input").on('focus',function() {
            $(this).addClass('focusm')

        })
        $(".input input").on('blur',function() {
                if ($(this).val() === '')
                    $(this).removeClass('focusm');
            })
    </script>
</body>

</html>